<template>
  <div class="app-container">
    <el-form
      ref="form"
      :inline="true"
      :model="formData"
      class="demo-form-inline"
    >
      <el-form-item label="订单号">
        <el-input
          v-model="formData.orderNumber"
          placeholder="请输入订单号"
        ></el-input>
      </el-form-item>

      <el-form-item label="手机号码">
        <el-input
          v-model="formData.phone"
          placeholder="请输入手机号码"
        ></el-input>
      </el-form-item>

      <el-form-item label="水洗码">
        <el-input
          v-model="formData.washCode"
          placeholder="请输入水洗码"
        ></el-input>
      </el-form-item>

      <el-form-item label="清洗状态">
        <el-select v-model="formData.status" clearable placeholder="清洗状态">
          <el-option
            v-for="item in shoeStatusList"
            :label="item.label"
            :value="item.value"
            :key="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="入库人">
        <el-input
          v-model="formData.storageUserName"
          placeholder="请输入入库人"
        ></el-input>
      </el-form-item>

        <el-form-item label="选择工厂">
        <el-select v-model="formData.factoryId" clearable placeholder="请选择工厂">
          <el-option
            v-for="item in factoryList"
            :label="item.factoryName"
            :value="item.id"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="入库时间">
        <el-date-picker
          v-model="formData.storageTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
        <el-button type="primary" @click="reportExele">导出</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
        <el-button type="primary" @click="finish">清洗完成</el-button>
        <el-button
          type="primary"
          @click="submitFinishYj"
          :loading="submitFinishLoading"
          >一键完成</el-button
        >
      </el-form-item>
    </el-form>

    <el-table
      v-loading="loading"
      :data="list"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="orderNumber" label="订单号" width="200">
      </el-table-column>
      <el-table-column prop="phone" label="手机号码" width="120">
      </el-table-column>
      <el-table-column prop="washCode" label="水洗码" width="200">
      </el-table-column>
      <el-table-column prop="washFactory" label="清洗工厂" width="200">
      </el-table-column>
      <el-table-column prop="itemType" label="物品类型" width="200">
      </el-table-column>

      <el-table-column prop="accessorVoList" label="配饰" width="200">
        <template  slot-scope="scope" >
      
          <el-tag v-for="item in scope.row.accessorVoList" :key="item.id" style="margin-left: 5px;">
            {{item.type}}
          </el-tag>

        </template>
      </el-table-column>

         <el-table-column prop="remarks" label="备注" width="200">

          <template  slot-scope="scope" >
      
          <el-tag v-for="item in scope.row.remarks" style="margin-left: 5px;" :key="item">
            {{item}}
          </el-tag>

        </template>
  
         </el-table-column>

        <el-table-column prop="qualityInspectionTime" label="质检时间" width="200">
      </el-table-column>

       <el-table-column prop="qualityInspector" label="质检人" width="200">
      </el-table-column>

      <el-table-column prop="washType" label="类型"> </el-table-column>
      <el-table-column prop="srgCode" label="货架号"> </el-table-column>
      <el-table-column prop="storageTime" label="入库时间" width="180">
      </el-table-column>
      <el-table-column label="清洗状态" width="150">
        <template slot-scope="scope">
          <el-tag size="small" type="success">{{
            shoeStatusMap[scope.row.status]
          }}</el-tag>

          <el-tag
            size="small"
            type="danger"
            style="margin-left: 5px"
            v-if="scope.row.extendInfo"
            >{{ scope.row.extendInfo }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column prop="storageUserName" label="入库人" width="120">
      </el-table-column>
      <el-table-column label="图片">
        <template slot-scope="scope">
          <template v-if="getPictureUrl(scope.row.picture).length">
            <el-image
              style="width: 50px; height: 50px"
              :src="getPictureUrl(scope.row.picture)[0]"
              :preview-src-list="getPictureUrl(scope.row.picture)"
            >
            </el-image>
            <div style="text-align: center; width: 50px">
              共{{ getPictureUrl(scope.row.picture).length }}张
            </div>
          </template>
        </template>
      </el-table-column>
      <el-table-column
        prop="storageUserName"
        label="操作"
        fixed="right"
        width="100"
      >
        <template slot-scope="scope">
          <el-popconfirm
            style="margin-left: 10px"
            title="您确定要返洗当前鞋子吗"
            @confirm="backWash(scope.row)"
            v-if="scope.row.status === 2"
          >
            <el-button type="text" slot="reference">返洗</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-if="queryParams.total > 0"
      :total="queryParams.total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.limit"
      @pagination="getListData"
    />

    <PrintWashCodeTwo
      ref="PrintWashCodeTwo"
      :multipleSelection="printWashCodeIds"
    />

    <el-dialog
      title="批量清洗完成"
      @close="cancelFinish"
      :visible.sync="finishVisible"
      width="800px"
    >
      <el-form :inline="true" @submit.native.prevent="searchShoe">
        <el-form-item>
          <el-input
            ref="washCodeInput"
            v-model="finishData.value"
            placeholder="请扫描水洗码"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="searchShoe">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="finishData.listData">
        <el-table-column prop="washCode" label="水洗码"> </el-table-column>
        <el-table-column prop="washType" label="类型"> </el-table-column>
        <el-table-column prop="srgCode" label="货架号"> </el-table-column>
        <el-table-column label="图片">
          <template slot-scope="scope">
            <template v-if="getPictureUrl(scope.row.picture).length">
              <el-image
                style="width: 50px; height: 50px"
                :src="getPictureUrl(scope.row.picture)[0]"
                :preview-src-list="getPictureUrl(scope.row.picture)"
              >
              </el-image>

              <div style="text-align: center; width: 50px">
                共{{ getPictureUrl(scope.row.picture).length }}张
              </div>
            </template>
          </template>
        </el-table-column>
      </el-table>

      <div style="display: flex; justify-content: center; margin-top: 30px">
        <el-button style="margin-right: 20px" @click="cancelFinish"
          >取消</el-button
        >
        <el-button type="primary" @click="submitFinish" :loading="submitLoading"
          >提交</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getShoeList,
  getShoeDetailByWashCode,
  updateShoeStatusToWashComplete,
  shoeBackWash,
} from "@/api/shoeRack/index";
import { IMAGE_OSS_URL } from "@/config/index";
import { shoeStatusMap, shoeStatusList } from "@/config";
import PrintWashCodeTwo from "@/components/PrintWashCodeTwo/PrintWashCodeTwo.vue";
import { setStartOfDay, setEndOfDay } from "@/utils/tool";
import { listFactory } from '@/api/factory/index'
export default {
  components: {
    PrintWashCodeTwo,
  },
  data() {
    return {
      loading: false,
      submitFinishLoading: false,
      queryParams: {
        page: 0,
        limit: 0,
        total: 0,
      },
      formData: {
        orderNumber: "",
        phone: "",
        washCode: "",
        status: "",
        storageUserName: "",
        storageTime: "",
      },
      list: [],
      shoeStatusMap,
      shoeStatusList,

      factoryList:[],

      multipleSelection: [],

      finishVisible: false,
      submitLoading: false,
      finishData: {
        value: "",
        listData: [],
      },

      printWashCodeIds: [],
    };
  },

  created() {
    this.getListData({
      page: 1,
      limit: 10,
    });

    listFactory({pageNo:1,pageSize:999}).then(res=>{
       this.factoryList=res.data.records
    })
  },
  methods: {
    getPictureUrl(picture) {
      return picture
        ? picture.split(",").map((key) => {
            return IMAGE_OSS_URL + key;
          })
        : [];
    },
    onSearch() {
      this.queryParams = {
        ...this.formData,
      };
      this.getListData({
        page: this.queryParams.page,
        limit: 10,
      });
    },
    reset() {
      this.formData = {
        orderNumber: "",
        phone: "",
        washCode: "",
        status: "",
        storageUserName: "",
        storageTime: "",
      };
    },
    cancelFinish() {
      this.finishVisible = false;
      this.finishData = {
        value: "",
        listData: [],
      };
    },
    finish() {
      this.finishVisible = true;
      this.$nextTick(() => {
        setTimeout(() => {
          this.$refs.washCodeInput?.focus();
        }, 200); // 确保弹窗动画完成后再聚焦
      });
    },
    searchShoe() {
      const washCodes = this.finishData.listData.map((item) => item.washCode);
      if (washCodes.includes(this.finishData.value)) {
        return this.$message.error("该水洗码已扫描");
      }
      getShoeDetailByWashCode(this.finishData.value)
        .then(({ data }) => {
          if (!data) {
            return this.$message.error("未找到该水洗码");
          }
          if (data.status === 2) {
            return this.$message.error("该鞋子已清洗完成");
          }
          this.finishData.listData = [...this.finishData.listData, data];
          this.finishData.value = "";
        })
        .catch(() => {
          this.$message.error("查询失败，请检查网络");
        })
        .finally(() => {
          this.$nextTick(() => {
            if (this.$refs.washCodeInput) {
              this.$refs.washCodeInput.focus();
            }
          });
        });
    },
    submitFinish() {
      if (this.finishData.listData.length === 0) {
        this.$message.error("请扫描水洗码");
        return;
      }
      this.submitLoading = true;
      const ids = this.finishData.listData.map((item) => item.id).join(",");
      updateShoeStatusToWashComplete(ids)
        .then(() => {
          this.printWashCodeIds = this.finishData.listData
            .filter((item) => item.washShop)
            .map((item) => {
              return {
                washCode: item.washCode,
                srgCode: item.srgCode,
                phone: item.phone,
                washType: item.washType,
              };
            });
          if (!!this.printWashCodeIds.length) {
            this.$refs.PrintWashCodeTwo.$refs.printBtn.click();
          }
          this.$message.success("清洗完成");
          this.finishVisible = false;
          this.finishData = {
            value: "",
            listData: [],
          };
          this.getListData({
            page: 1,
            limit: 10,
          });
        })
        .finally(() => {
          this.submitLoading = false;
        });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    backWash(row) {
      shoeBackWash(row.id).then(() => {
        this.$message.success("返洗成功");
        this.getListData({
          page: 1,
          limit: 10,
        });
      });
    },
    submitFinishYj() {
      if (this.multipleSelection.length === 0) {
        this.$message.error("请选择鞋子");
        return;
      }
      this.submitFinishLoading = true;
      const ids = this.multipleSelection.map((item) => item.id).join(",");
      updateShoeStatusToWashComplete(ids)
        .then(() => {
          this.$message.success("清洗完成");
          this.getListData({
            page: this.queryParams.page,
            limit: 10,
          });
          this.printWashCodeIds = this.multipleSelection
            .filter((item) => item.washShop)
            .map((item) => {
              return {
                washCode: item.washCode,
                srgCode: item.srgCode,
                phone: item.phone,
                washType: item.washType,
              };
            });
          if (!!this.printWashCodeIds.length) {
            // this.$refs.PrintWashCodeTwo.$refs.printBtn.click();
          }
        })
        .finally(() => {
          this.submitFinishLoading = false;
          this.multipleSelection = [];
        });
    },

    //做导出动作
    reportExele(){
   
      const finalParams = {
        ...this.formData,
      };

      if (this.formData.storageTime) {
        finalParams.startTime = setStartOfDay(this.formData.storageTime[0]);
        finalParams.endTime = setEndOfDay(this.formData.storageTime[1]);
        delete finalParams.storageTime;
      }
      // console.info(finalParams)
      this.download('shoe/export', finalParams, `shoe_${new Date().getTime()}.xlsx`)

    },


    getListData({ page, limit }) {
      this.loading = true;

      const finalParams = {
        ...this.queryParams,
      };

      if (this.queryParams.storageTime) {
        finalParams.startTime = setStartOfDay(this.queryParams.storageTime[0]);
        finalParams.endTime = setEndOfDay(this.queryParams.storageTime[1]);
        delete finalParams.storageTime;
      }

      getShoeList(
        finalParams,
        page || this.queryParams.page + 1,
        limit || this.queryParams.limit
      )
        .then(({ data }) => {
          this.list = data.records;
          this.queryParams.total = data.total;
          this.queryParams.page = data.current;
          this.queryParams.limit = data.size;
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped></style>
